<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8">
        <title>gl.enchant.js - Billboard</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
        </style>
        <script type="text/javascript" src="../js/gl.enchant.js/glMatrix-0.9.5.min.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/enchant.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/gl.enchant.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/debug-camera3d.gl.enchant.js"></script>
        <script type="text/javascript" src="../js/gl.enchant.js/primitive.gl.enchant.js"></script>
        <script>
            // おまじない
            enchant();
            
            window.onload = function() {
                var game = new Game(innerWidth, innerHeight);
                game.fps = 60;
                game.keybind(90, 'a');// z
                game.keybind(88, 'b');// x
                
                // プリミティブ名を取得
                
                game.onload = function() {
                    // 3D 用シーン生成
                    var scene = new Scene3D();
                    
                    // ライト生生
                    var light = new DirectionalLight(); // 平行光源生成
                    light.directionZ = 1;               // 向き
                    light.color = [1.0, 1.0, 1.0];      // 色
                    scene.setDirectionalLight(light);   // scene にセット
                    
                    // カメラ生成
                    var camera = new DebugCamera3D();   // カメラ生成
                    camera.enable(game.rootScene);      // デバッグカメラ有効化
                    scene.setCamera(camera);            // scene にセット
                    
                    // 目玉を生成
                    for (var i=0; i<32; ++i) {
                        var eyeball = new Eyeball();
                        eyeball.x = Math.random()*20-10;
                        eyeball.y = Math.random()*20-10;
                        eyeball.z = Math.random()*20-10;       // 位置をセット
                        scene.addChild(eyeball);               // scene にセット
                    }
                };
                
                game.start();
            };
            
            
            var BillboardSprite3D = enchant.Class.create(Sprite3D, {
                initialize: function() {
                    Sprite3D.call(this);
                    
                    var game = enchant.Game.instance;
                    this.addEventListener("render", function() {
                        if (game.currentScene3D._camera) {
                            this.rotation = game.currentScene3D.cameraMatInverse;
                        }
                    });
                }
            });
            
            var Eyeball = enchant.Class.create(BillboardSprite3D, {
                initialize: function() {
                    BillboardSprite3D.call(this);
                    
                    var sphere = new Sphere();
                    mat4.identity(sphere.rotation);
                    mat4.rotateY(sphere.rotation, 90*Math.PI/180);
                    var mesh = sphere.mesh;
                    mesh.texture = new Texture("red-eye.png");
                    mesh.setBaseColor([1.0, 1.0, 1.0, 1.0]);
                    mesh.texture.ambient = [1.0, 1.0, 1.0, 1.0];
                    this.addChild(sphere);
                }
            });
            
        </script>
    </head>
    <body>
        <h1></h1>
    </body>
</html>